雖然年初就已經知道Sass, 但是實際學習與應用卻是在這一兩個月.
坦白說我自己一開始認為很難, 怕用了之後反而不會寫CSS, 以及編譯的問題而產生有點抗拒的心態, 可是真的在寫的時候發現真的還好, 而且也有編譯的軟體, 所以這些煩惱就不需要煩惱啦~非常建議各位來試試看!
雖然年初就已經知道Sass, 但是實際學習與應用卻是在這一兩個月.
坦白說我自己一開始認為很難, 怕用了之後反而不會寫CSS, 以及編譯的問題而產生有點抗拒的心態, 可是真的在寫的時候發現真的還好, 而且也有編譯的軟體, 所以這些煩惱就不需要煩惱啦~非常建議各位來試試看!

雖然我實際運用不久, 還有很多強大功能尚未一一發掘, 可是就光基礎的東西就讓我佩服不已了(笑)
以下紀錄我的Sass使用心得:

1. 巢狀結構
   以往寫CSS像是ul, li等等的要這樣寫, 要重寫一次很麻煩, 如果事後要找更麻煩:

   ul { color: #000; }
   ul li { float: left; }

但是Sass的巢狀結構可以這樣寫, 階層方面很清楚一目了然, 從Code上就可以知道li是在ul裡面的, 而且編譯出來的結果其實跟上面一樣, 不必擔心瀏覽器看不懂:

ul { 
    color: #000;
    li { float: left; }
}

但是也不要太開心一次全部包進去喔:

.header {
    margin: 0 auto;
    .main {
        width: 500px;
        .hi {
            background: #eee;
            ul { 
                color: #000;
                li { float: left; }
            }
        }
    }
}

編譯結果會是這樣:

.header { margin: 0 auto; }
.header .main { width: 500px; }
.header .main .hi { background: #eee; }
.header .main .hi ul { color: #000; }
.header .main .hi ul li { float: left; }

因為瀏覽器的渲染方向是從最後一個元素開始往前找的, 包太多層出來的結果會造成運行變慢, 千萬恩湯阿恩湯~

2. 變數
   只要在檔案上方設定變數, 底下的同樣設定都可以套用, 這樣要改也可以一次改完不用找半天找到眼睛打結:

   $color: #666;
   p { color: $color; }

3. @import
   以前常常有CSS太多行或者是檔案太多導致管理不易等問題, 但現在使用Sass可以利用@import功能把背後眾多檔案合併編譯成一個檔案, 維護上容易(因為自己在修改的時候還是去找原本拆出的檔案), 也不用擔心程式連錯檔案或者一次全放進去導致request數增加等問題囉
   那編譯時只要合併好的檔案, 其他檔案不想一起產出該怎辦呢?把不需要產出的檔案命名前面多加一個"_"即可.

4. mixin
   mixin可以設定需要重複出現的樣式, 只要把常用樣式建立一個mixin, 在其他地方include進去, 如果有小小要修改的樣式可以在mixin底下重新寫一個樣式覆蓋掉.這樣不必在很多地方複製貼上, 當然修改的時候也是直接改mixin就行:

   @mixin type {
   border: 1px solid #000;
   background: pink;
   color: black;
   }

   .test {
   @include type;
   color: #666;
   }

以上是Sass的好用簡介, 單然還有很多還沒介紹到的, 希望大家一起來尋找~!!
若有誤也請指正, 謝謝.
本文同步發表於http://azzurro.blog.aznc.cc/make_a_website_19/